$(function () {
    hideAll();
    $("#right4").show();
});
var date=new Date();
var DEFAULT_TARGET_DAYS=7;
function gotoLogin() {
    window.location="login.html";
}
function hideAll() {
    $("#right1").hide();
    $("#right2").hide();
    $("#right3").hide();
    $("#right4").hide();
}
function getXDays(date,targetDays) {
    var days=[];
    var data={
        "year":date.getFullYear(),
        "month":date.getMonth()+1,
        "day":date.getDate(),
        "targetDays":targetDays
    };
    $.ajax({
        url:URL_PREFIX+"/cost/getXDays",
        type:"post",
        contentType:"application/json",
        data:JSON.stringify(data),
        async:false,
        statusCode:{
            200:function (data) {
                days=data;
            }
        }
    });
    return days;
}
function getTotalPayList(date,targetDays){
    var payList=[];
    var data={
        "year":date.getFullYear(),
        "month":date.getMonth()+1,
        "day":date.getDate(),
        "targetDays":targetDays
    };
    $.ajax({
        url:URL_PREFIX+"/cost/getTotalPayList",
        type:"post",
        data:JSON.stringify(data),
        contentType:"application/json",
        async:false,
        statusCode:{
            200:function (dataList) {
                payList=dataList;
            },403:function () {
                gotoLogin();
            }
        }
    });
    return payList;
}
function getMultiPayLists(date,targetDays) {
    var lists=[];
    var data={
        "year":date.getFullYear(),
        "month":date.getMonth()+1,
        "day":date.getDate(),
        "targetDays":targetDays
    };
    $.ajax({
        url:URL_PREFIX+"/cost/queryPayListWithoutDetail",
        type:"post",
        data:JSON.stringify(data),
        contentType:"application/json",
        dataType:"text json",
        async:false,
        statusCode:{
            200:function (costList) {
                lists[0]=costList.eatList;
                lists[1]=costList.houseList;
                lists[2]=costList.communicationList;
                lists[3]=costList.trafficList;
                lists[4]=costList.dailyList;
                lists[5]=costList.educationList;
                lists[6]=costList.clothesList;
                lists[7]=costList.snacksList;
                lists[8]=costList.fruitsList;
                lists[9]=costList.medicalList;
                lists[10]=costList.othersList;
            },403:function () {
                gotoLogin();
            }
        }
    });
    return lists;
}

function getSumEachOther(year,month) {
    var cwd;
    $.ajax({
        url:URL_PREFIX+"/cost/sumEachOther/"+year+"/"+month,
        type:"get",
        async:false,
        statusCode:{
            200:function (data) {
                cwd=data;
            },403:function () {
                gotoLogin();
            }
        }
    });
    return cwd;
}

function clickBtn1() {
    hideAll();
    $("#right1").show();
    $("#targetDays1").val(DEFAULT_TARGET_DAYS);
    drawLineChart(DEFAULT_TARGET_DAYS);
}
function clickBtn2() {
    hideAll();
    $("#right2").show();
    $("#targetDays2").val(DEFAULT_TARGET_DAYS);
    drawBarChart(DEFAULT_TARGET_DAYS);
}
function clickBtn3() {
    hideAll();
    $("#right3").show();
    drawCircleChart(0,0);
}
function query() {
    var year=$("#sel_year").val();
    var month=$("#sel_month").val();
    if(year==0 && month!=0){
        alert("请选择年份！");
        return;
    }
    drawCircleChart(year,month);
}

function drawLineChart(targetDays) {
    var myChart=echarts.init(document.getElementById("main1"));
    var x=getXDays(date,targetDays);
    var y=getTotalPayList(date,targetDays);
    var option = {
        title:{
            text:"过去"+targetDays+"天支出情况折线图"
        },
        legend:{
            data:['日支出']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: x
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: y,
            type: 'line',
            // areaStyle: {},
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        }]
    };
    myChart.setOption(option)
}
function drawBarChart(targetDays) {
    var myChart=echarts.init(document.getElementById("main2"));
    var x=getXDays(date,targetDays);
    var y=getMultiPayLists(date,targetDays);
    var gridList=['餐饮', '住房', '通讯', '交通', '日常','学习','服饰','零食','水果','医疗','其它'];
    var option = {
        title: {
            text: "过去"+targetDays+"天支出柱状图"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: gridList
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: x
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: gridList[0],
                type: 'bar',
                stack: '广告',
                label:{
                    show: true
                },
                data: y[0]
            },
            {
                name: gridList[2],
                type: 'bar',
                stack: '广告',
                data: y[2]
            },
            {
                name: gridList[5],
                type: 'bar',
                stack: '广告',
                data: y[5]
            },
            {
                name: gridList[6],
                type: 'bar',
                stack: '广告',
                data: y[6]
            },
            {
                name: gridList[7],
                type: 'bar',
                stack: '广告',
                data: y[7]
            },
            {
                name: gridList[10],
                type: 'bar',
                stack: '广告',
                data: y[10]
            },
            {
                name: gridList[3],
                type: 'bar',
                stack: '广告',
                data: y[3]
            },
            {
                name: gridList[4],
                type: 'bar',
                stack: '广告',
                data: y[4]
            },

            {
                name: gridList[8],
                type: 'bar',
                stack: '广告',
                data: y[8]
            },
            {
                name: gridList[9],
                type: 'bar',
                stack: '广告',
                data: y[9]
            },
            {
                name: gridList[1],
                type: 'bar',
                stack: '广告',

                data: y[1]
            }
        ]
    };
    myChart.setOption(option)
}
function drawCircleChart(year,month) {
    var myChart=echarts.init(document.getElementById("main3"));
    var gridList=['餐饮', '住房', '通讯', '交通', '日常','学习','服饰','零食','水果','医疗','其它'];
    var values=getSumEachOther(year,month);
    var title='';
    if(year==0 && month==0){
        title='所有年月所有支出饼状图';
    }else if(month==0){
        title=year+'年所有支出饼状图';
    }else{
        title=year+'年'+month+'月所有支出饼状图';
    }
    var option = {
        title:{
            text:title
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            top: 30,
            left: 10,
            data: gridList
        },
        series: [
            {
                name: '支出去向',
                type: 'pie',
                radius: ['50%', '70%'],
                // radius: '55%',
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: values.eat, name: gridList[0]},
                    {value: values.house, name: gridList[1]},
                    {value: values.communication, name: gridList[2]},
                    {value: values.traffic, name: gridList[3]},
                    {value: values.daily, name: gridList[4]},
                    {value: values.education, name: gridList[5]},
                    {value: values.clothes, name: gridList[6]},
                    {value: values.snacks, name: gridList[7]},
                    {value: values.fruits, name: gridList[8]},
                    {value: values.medical, name: gridList[9]},
                    {value: values.others, name: gridList[10]}
                ].sort(function (a, b) { return a.value - b.value; }),
            }
        ]
    };
    myChart.setOption(option);
}